import React, { Component } from 'react';
import { Row, Col, Card, Form, Input, Divider,
  Button, Table, Modal } from 'antd';
import { connect } from 'dva';
import styles from './List.less';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import AddRole from './AddRole';
import RoleManage from './RoleManage';

const FormItem = Form.Item;

@connect(({ rule, loading }) => ({
  rule,
  loading: loading.models.rule,
}))
@Form.create()
export default class RoleList extends Component {
  state = {
    showPermissionAddVisible: false,
    showPermissionManageVisible: false,
    permissionId: undefined,
  }
  componentDidMount() {
    const { dispatch } = this.props;
    // dispatch({
    //   type: 'rule/adminList',
    // });
  }
  handleStandardTableChange = (pagination) => {
    const { dispatch } = this.props;
    const params = {
      page: pagination.current,
      pageSize: pagination.pageSize,
    };
    dispatch({
      type: 'rule/adminList',
      payload: params,
    });
  }
  handleSearch = (e) => {
    e.preventDefault();

    const { dispatch, form } = this.props;

    form.validateFields((err, fieldsValue) => {
      if (err) return;
      console.log(fieldsValue);
    });
  }
  handleFormReset = () => {
    const { form, dispatch } = this.props;
    form.resetFields();
    dispatch({
      type: 'rule/adminList',
      payload: {},
    });
  }
  handleAddPermissionModal= () => {
    this.setState({
      showPermissionAddVisible: true,
    });
  }
  handleAddPermissionModalCancel =() => {
    this.setState({
      showPermissionAddVisible: false,
    });
  }
  handlePermissionManageModal= (value) => {
    this.setState({
      showPermissionManageVisible: true,
      districtId: value.id,
    });
  }
  handlePermissionManageModalCancel =() => {
    this.setState({
      showPermissionManageVisible: false,
    });
  }
  handleChildModalClose = () => {
    this.setState({
      showPermissionManageVisible: false,
    });
  }
  renderSimpleForm() {
    const { getFieldDecorator } = this.props.form;
    return (
      <Form onSubmit={this.handleSearch} layout="inline">
        <Row gutter={{ xs: 8, sm: 16, md: 24 }}>
          <Col md={8} sm={8}>
            <FormItem label="关键字">
              {getFieldDecorator('no')(
                <Input placeholder="请输入搜索关键字" />
              )}
            </FormItem>
          </Col>
          <Col span={8}>
            <span className={styles.submitButtons}>
              <Button icon="search" type="primary" htmlType="submit" >查询</Button>
              <Button icon="reload" style={{ marginLeft: 8 }} onClick={this.handleFormReset}>重置</Button>
            </span>
          </Col>
        </Row>
      </Form>
    );
  }
  render() {
    const { rule: { data }, loading } = this.props;
    const { showPermissionManageVisible, showPermissionAddVisible, permissionId } = this.state;
    const columns = [
      {
        title: '编号',
        dataIndex: 'id',
        width: '33%',
      },
      {
        title: '角色名称',
        dataIndex: 'name',
        width: '33%',
      },
      {
        title: '操作',
        key: 'key',
        render: (text, record, index) => {
          return (
            <div key={index.toString()}>
              <Button type="primary" onClick={() => { this.handlePermissionManageModal(text); }} >
                管理权限
              </Button>
              <Divider type="vertical" />
              <Button type="danger" onClick={() => { console.log(text.status); }} >
                删除
              </Button>
            </div>
          );
        },
      },
    ];
    const paginationProps = {
      showSizeChanger: true,
      showQuickJumper: true,
      total: data.total,
      showTotal: (total, range) => `${range[0]}-${range[1]} of ${total} items`,
    };
    return (
      <PageHeaderLayout title="角色管理">
        <Card bordered={false}>
          <div className={styles.tableList}>
            <div className={styles.tableListForm}>
              {this.renderSimpleForm()}
            </div>
            <Card bordered>
              <div className={styles.tableListOperator}>
                <Button icon="plus" type="primary" onClick={() => this.handleAddPermissionModal()}>
                  新建
                </Button>
              </div>
              <Table
                bordered
                loading={loading}
                dataSource={data.data}
                columns={columns}
                pagination={paginationProps}
                onChange={this.handleStandardTableChange}
              />
            </Card>
          </div>
        </Card>
        <Modal
          visible={showPermissionAddVisible}
          title="添加角色"
          footer={null}
          width="40%"
          onCancel={() => this.handleAddPermissionModalCancel()}
          destroyOnClose
        >
          <AddRole />
        </Modal>
        <Modal
          visible={showPermissionManageVisible}
          title="管理权限"
          footer={null}
          onCancel={() => this.handlePermissionManageModalCancel()}
          destroyOnClose
        >
          <RoleManage />
        </Modal>
      </PageHeaderLayout>
    );
  }
}
